<template>
  <div class="student_wrap">
    <page-nav :titlearr="titlearr"></page-nav>
    <!-- 表单部分 -->
    <div class="student_form">
      <el-form>
        <el-form-item>
          <el-input v-model="searchObj.userName"
                    placeholder="输入用户名"></el-input>
          <el-input v-model="searchObj.email"
                    placeholder="输入邮箱"></el-input>
          <el-input v-model="searchObj.phone"
                    placeholder="手机号"></el-input>
          <el-button type="primary"
                     @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-input v-model="add.addemail"
                    placeholder="输入邮箱"></el-input>
          <el-input v-model="add.adduserName"
                    placeholder="输入用户名"></el-input>
          <el-input v-model="add.addphone"
                    placeholder="手机号"></el-input>
          <el-button type="success"
                     @click="addStudent">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格部分 -->
    <div class="table_title">
      <i class="el-icon-platform-eleme"></i>
      <div>学员列表</div>
    </div>
    <div class="student_table">
      <div>
        <el-table border
                  :data="studentList">
          <el-table-column label="用户名"
                           prop="userName">

          </el-table-column>
          <el-table-column label="邮箱"
                           prop="email">

          </el-table-column>
          <el-table-column label="手机号"
                           prop="phone">

          </el-table-column>
          <el-table-column label="注册日期">
            <template slot-scope="scope">
              <div>
                {{new Date(scope.row.createAt).toLocaleString()}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <div>
                {{scope.row.isstate?"冻结中":'正常使用'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button @click="freeze(scope.row)"
                           :type="scope.row.isstate?'success':'primary'">{{scope.row.isstate?"解冻":"冻结"}}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页部分 -->
      <div class="student_page">
        <el-button size="small"
                   type="success"
                   @click="turnTop">首页</el-button>
        <el-pagination background
                       :current-page="pageStart"
                       layout="prev, pager, next"
                       :total="count"
                       :page-size="pageSize"
                       @current-change="pageChange">
        </el-pagination>
        <el-button type="success"
                   size="small"
                   @click="goEnd">尾页</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import pageNav from '../../components/pageNav'
import { addStudentApi, getStudentApi, freezeApi } from '../../api/student'
export default {
  name: "student",
  data () {
    return {
      add: { //添加所需要的数据
        addemail: "",
        adduserName: "",
        addphone: ""
      },
      searchObj: { //查询所需的数据
        userName: "",
        email: "",
        phone: ""
      },
      pageStart: 1,//当前页码
      count: 0, //总数据条数
      pageSize: 0, //每页显示的条数
      pageCount: 0,//总页数
      studentList: [], //学员列表数据
      titlearr: [
        {
          name: "首页",
          path: "/home"
        },
        {
          name: "用户管理",
          path: "/home"
        },
        {
          name: "学员管理",
          path: "/student"
        }
      ]
    }
  },
  created () {
    this.getStudent()
  },
  methods: {
    turnTop () {//跳转首页
      this.pageStart = 1;
      this.getStudent();
    },
    goEnd () {//跳转尾页
      this.pageStart = this.pageCount;
      this.getStudent();
    },
    pageChange (currentPage) {//分页是改变事件
      console.log(currentPage)
      // 发送ajax请求 从新请求学员列表
      this.pageStart = currentPage;//改变当前页码
      this.getStudent();
    },
    freeze (row) {//冻结方法  row当前行数据
      freezeApi(row.tokenId).then(res => {
        if (res.success) {
          this.getStudent();//冻结后重新渲染列表
        }
        if (res.err) {
          this.$alert("冻结失败")
        }
      })
    },
    search () {//查询
      this.getStudent()
      this.searchObj.userName = ""
      this.searchObj.phone = ""
      this.searchObj.email = ""
    },
    async getStudent () { //获取学员列表
      var res = await getStudentApi({
        pageStart: this.pageStart,
        userName: this.searchObj.userName,
        phone: this.searchObj.phone,
        email: this.searchObj.email,
      })
      console.log(res.data)
      this.count = res.data.count;//总数据条数
      this.pageSize = res.data.pageSize;//每页的条数
      this.pageCount = Math.ceil(res.data.count / res.data.pageSize)//总页数
      this.studentList = res.data.list;
    },
    async addStudent () {//添加学员
      var res = await addStudentApi({
        addemail: this.add.addemail,
        adduserName: this.add.adduserName,
        addphone: this.add.addphone
      })
      if (res.success) {
        this.$alert("添加成功")
        this.getStudent();
      }
      if (res.err) {
        this.$alert(res.err)
      }
      // 清空输入框
      this.add.addemail = ""
      this.add.adduserName = ""
      this.add.addphone = ""
    }
  },
  components: {
    pageNav
  }
}
</script>
<style lang="less">
.student_wrap {
  background: #f7f7f7;
}
.student_form {
  width: 1300px;
  margin: 30px auto;
  background: white;
  .el-form-item {
    .el-form-item__content {
      width: 1500px;
      margin: 5px auto;
      display: flex;
    }
  }
  .el-input {
    width: 259px;
    margin-left: 50px;
  }
}
.table_title {
  width: 1300px;
  margin: 0 auto;
  line-height: 40px;
  display: flex;
  i {
    width: 38px;
    height: 38px;
    border: 1px solid black;
    line-height: 38px;
    text-align: center;
    font-size: 20px;
    border-right: none;
  }
  > div {
    height: 40px;
    border: 1px solid black;
    flex: 1;
    padding-left: 20px;
    box-sizing: border-box;
  }
}
.student_table {
  width: 1300px;
  margin: 0 auto;
  background: white;
  border: 1px solid black;
  thead tr th {
    background: skyblue;
  }
}
.student_page {
  width: 1300px;
  margin: 0 auto;
  display: flex;
  background: white;
}
</style>